<template>
  <div :class="computedClass">
    <img class="avatar" :src="props.chat.avatar !=='' ? props.chat.avatar : userInfo.actvator" />
      <!--文本消息（可能有表情包）-->
      <MessageTextComponent v-if="props.chat.type===0" />
      <!-- 图片消息 -->
      <MessageImgageComponent v-if="props.chat.type===1" />
      <!--视频消息-->
      <MessageVideoComponent v-if="props.chat.type===2" />
      <!--语音消息-->
      <MessageVideoComponent v-if="props.chat.type===3" />
  </div>
</template>
<script lang="ts" setup>
import useAuthStore from '@/stores/authStore';
import { computed, provide } from 'vue'
import MessageTextComponent from '@/components/chat/message/MessageTextComponent.vue'
import MessageImgageComponent from './chat/message/MessageImgageComponent.vue';
import MessageVideoComponent from './chat/message/MessageVideoComponent.vue';
import MessageVoliceComponent from './chat/message/MessageVoliceComponent.vue';
const authStore = useAuthStore();

const userInfo = authStore.userInfo;
const props = defineProps({
  class: {
    type: String,
    default: ''
  },
  align: {
    type: String,
    default: 'left'
  },
  chat: {
    type: Object,
    default: () => {}
  },
})
const computedClass = computed(()=> ['chatReacordItem', props.class, props.align].join(' '))
provide('chat', props.chat)
provide('align', props.align)
</script>
<style lang="less" scoped>
.chatReacordItem {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
  //min-height: 37px;
  gap: 10px;
  &.right {
    align-self: self-end;
    flex-direction: row-reverse;
    .messageContent {
      flex-direction: row-reverse;
      .messageToogle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 8px 8px 8px; /* 左侧边框宽度决定三角大小 */
        border-color: transparent transparent transparent #6fe648; /* 左侧边框颜色与消息背景色相同 */
        position: relative;
        top: 9px;
      }
      .content {
        background-color: #6fe648;
      }
    }
  }
  .avatar {
    height: 37px;
    width: 37px;
    border-radius: 5px;
  }
  .messageContent {
    display: flex;
    width: 70%;
    .messageToogle {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 8px 8px 0; /* 右侧边框宽度决定三角大小 */
      border-color: transparent white transparent transparent;
      position: relative;
      top: 9px;
      filter: drop-shadow(-2px 2px 4px #ececec);
      //box-shadow: -2px 2px 4px #ececec;
    }
    .content {
      background-color: white;
      padding: 7px 10px;
      border-radius: 3px;
      font-size: 13.5px;
      //filter: drop-shadow(2px 0px 10px #f1f1f1);
      box-shadow: 2px 2px 4px #ececec;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      max-width: 70%;
      font-size: 14px;
    }
  }
}
</style>
